import React, { useState } from 'react';
import './styles.css';
import { TodoProvider } from './context/TodoContext';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import WorkTodos from './pages/WorkTodos';
import PersonalTodos from './pages/PersonalTodos';
import ShoppingTodos from './pages/ShoppingTodos';
import TodoDetails from './pages/TodoDetails';
import NotFound from './pages/NotFound';

function Demo3() {
  const [currentPage, setCurrentPage] = useState('home');
  const [currentTodoId, setCurrentTodoId] = useState(null);
  const [previousPages, setPreviousPages] = useState(['home']);

  // 提供一个导航上下文，替代 react-router-dom
  const navigationContext = {
    navigate: (path) => {
      if (path === -1) {
        // 后退功能
        if (previousPages.length > 1) {
          const newPreviousPages = [...previousPages];
          newPreviousPages.pop(); // 移除当前页面
          const previousPage = newPreviousPages[newPreviousPages.length - 1];
          setPreviousPages(newPreviousPages);
          
          // 设置为上一个页面
          if (previousPage === 'todoDetails') {
            // 如果上一页是详情页，需要保留 todoId
            setCurrentPage(previousPage);
          } else {
            setCurrentPage(previousPage);
            setCurrentTodoId(null);
          }
        }
      } else {
        // 正常导航
        let newPage;
        if (path === '/') {
          newPage = 'home';
          setCurrentTodoId(null);
        } else if (path === '/work') {
          newPage = 'work';
          setCurrentTodoId(null);
        } else if (path === '/personal') {
          newPage = 'personal';
          setCurrentTodoId(null);
        } else if (path === '/shopping') {
          newPage = 'shopping';
          setCurrentTodoId(null);
        } else if (path === '/404') {
          newPage = 'notFound';
          setCurrentTodoId(null);
        } else if (path.startsWith('/todo/')) {
          newPage = 'todoDetails';
          const id = parseInt(path.split('/')[2]);
          setCurrentTodoId(id);
        } else {
          newPage = 'notFound';
          setCurrentTodoId(null);
        }
        
        // 添加到历史记录
        setPreviousPages([...previousPages, newPage]);
        setCurrentPage(newPage);
      }
    }
  };

  // 渲染当前页面
  const renderPage = () => {
    switch (currentPage) {
      case 'home':
        return <Home navigationContext={navigationContext} />;
      case 'work':
        return <WorkTodos navigationContext={navigationContext} />;
      case 'personal':
        return <PersonalTodos navigationContext={navigationContext} />;
      case 'shopping':
        return <ShoppingTodos navigationContext={navigationContext} />;
      case 'todoDetails':
        return <TodoDetails todoId={currentTodoId} navigationContext={navigationContext} />;
      case 'notFound':
        return <NotFound navigationContext={navigationContext} />;
      default:
        return <Home navigationContext={navigationContext} />;
    }
  };

  return (
    <div className="demo3-container">
      <h1 className="demo3-title">React 路由和状态管理 Demo</h1>
      
      <div className="demo3-content">
        <TodoProvider>
          <Navbar 
            currentPage={currentPage} 
            navigationContext={navigationContext} 
          />
          <div className="demo3-page-content">
            {renderPage()}
          </div>
        </TodoProvider>
      </div>
    </div>
  );
}

export default Demo3; 